<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
    <meta charset="UTF-8"/>
    <title>
        A date range picker for Bootstrap
    </title>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.css" rel="stylesheet">
    <link href="http://www.jq22.com/jquery/font-awesome.4.6.0.css"
          rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="all" href="daterangepicker-bs3.css"
    />
    <script type="text/javascript" src="jquery.min.js">
    </script>
    <script type="text/javascript" src="bootstrap.min.js">
    </script>
    <script type="text/javascript" src="moment.js">
    </script>
    <script type="text/javascript" src="daterangepicker.js">
    </script>
    <style>
        .form-control:hover{
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="span12">

        <h1>Usage Examples</h1>

        <hr/>

        <h4>Basic Date Range Picker</h4>
        <div class="well">

            <form class="form-horizontal">
                <fieldset>
                    <div class="control-group">
                        <div class="controls">
                            <div class="input-prepend input-group">
                                <span class="add-on input-group-addon"><i
                                        class="glyphicon glyphicon-calendar fa fa-calendar"></i></span><input
                                    type="text" readonly style="width: 200px" name="reservation" id="reservation"
                                    class="form-control" value="2014-5-21 - 2014-6-21"/>
                            </div>
                        </div>
                    </div>
                </fieldset>
            </form>

            <script type="text/javascript">
                $(document).ready(function () {
                    $('#reservation').daterangepicker(null, function (start, end, label) {
                        console.log(start.toISOString(), end.toISOString(), label);
                    });
                });
            </script>

        </div>


        <h4>Basic Single Date Picker</h4>
        <div class="well">

            <form class="form-horizontal">
                <fieldset>
                    <div class="control-group">
                        <div class="controls">
                            <div class="input-prepend input-group">
                                <span class="add-on input-group-addon"><i
                                        class="glyphicon glyphicon-calendar fa fa-calendar"></i></span><input
                                    type="text" readonly style="width: 200px" name="birthday" id="birthday"
                                    class="form-control" value="03/18/2013"/>
                            </div>
                        </div>
                    </div>
                </fieldset>
            </form>

            <script type="text/javascript">
                $(document).ready(function () {
                    $('#birthday').daterangepicker({singleDatePicker: true}, function (start, end, label) {
                        console.log(start.toISOString(), end.toISOString(), label);
                    });
                });
            </script>

        </div>

        <h4>Date Range &amp; Time Picker with 30 Minute Increments</h4>
        <div class="well">

            <form class="form-horizontal">
                <fieldset>
                    <div class="control-group">
                        <label class="control-label" for="reservationtime">Choose your check-in and check-out
                            times:</label>
                        <div class="controls">
                            <div class="input-prepend input-group">
                                <span class="add-on input-group-addon"><i
                                        class="glyphicon glyphicon-calendar fa fa-calendar"></i></span>
                                <input type="text" style="width: 400px" name="reservation" id="reservationtime"
                                       class="form-control" value="08/01/2013 1:00 PM - 08/01/2013 1:30 PM"
                                       class="span4"/>
                            </div>
                        </div>
                    </div>
                </fieldset>
            </form>

            <script type="text/javascript">
                $(document).ready(function () {
                    $('#reservationtime').daterangepicker({
                        timePicker: true,
                        timePickerIncrement: 30,
                        format: 'MM/DD/YYYY h:mm A'
                    }, function (start, end, label) {
                        console.log(start.toISOString(), end.toISOString(), label);
                    });
                });
            </script>

        </div>

        <h4>Options Usage</h4>

        <div class="well" style="overflow: auto">

            <button id="options1" class="btn btn-primary">Apply Option Set 1</button>

            <button id="options2" class="btn btn-primary">Apply Option Set 2</button>

            <button id="destroy" class="btn btn-primary">Remove DateRangePicker</button>

            <div id="reportrange" class="pull-right"
                 style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
                <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                <span></span> <b class="caret"></b>
            </div>

            <script type="text/javascript">
                $(document).ready(function () {

                    var cb = function (start, end, label) {
                        console.log(start.toISOString(), end.toISOString(), label);
                        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                        //alert("Callback has fired: [" + start.format('MMMM D, YYYY') + " to " + end.format('MMMM D, YYYY') + ", label = " + label + "]");
                    }

                    var optionSet1 = {
                        startDate: moment().subtract('days', 29),
                        endDate: moment(),
                        minDate: '01/01/2012',
                        maxDate: '12/31/2014',
                        dateLimit: {days: 60},
                        showDropdowns: true,
                        showWeekNumbers: true,
                        timePicker: false,
                        timePickerIncrement: 1,
                        timePicker12Hour: true,
                        ranges: {
                            'Today': [moment(), moment()],
                            'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
                            'Last 7 Days': [moment().subtract('days', 6), moment()],
                            'Last 30 Days': [moment().subtract('days', 29), moment()],
                            'This Month': [moment().startOf('month'), moment().endOf('month')],
                            'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
                        },
                        opens: 'left',
                        buttonClasses: ['btn btn-default'],
                        applyClass: 'btn-small btn-primary',
                        cancelClass: 'btn-small',
                        format: 'MM/DD/YYYY',
                        separator: ' to ',
                        locale: {
                            applyLabel: 'Submit',
                            cancelLabel: 'Clear',
                            fromLabel: 'From',
                            toLabel: 'To',
                            customRangeLabel: 'Custom',
                            daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
                            monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                            firstDay: 1
                        }
                    };

                    var optionSet2 = {
                        startDate: moment().subtract('days', 7),
                        endDate: moment(),
                        opens: 'left',
                        ranges: {
                            'Today': [moment(), moment()],
                            'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
                            'Last 7 Days': [moment().subtract('days', 6), moment()],
                            'Last 30 Days': [moment().subtract('days', 29), moment()],
                            'This Month': [moment().startOf('month'), moment().endOf('month')],
                            'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
                        }
                    };

                    $('#reportrange span').html(moment().subtract('days', 29).format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));

                    $('#reportrange').daterangepicker(optionSet1, cb);

                    $('#reportrange').on('show.daterangepicker', function () {
                        console.log("show event fired");
                    });
                    $('#reportrange').on('hide.daterangepicker', function () {
                        console.log("hide event fired");
                    });
                    $('#reportrange').on('apply.daterangepicker', function (ev, picker) {
                        console.log("apply event fired, start/end dates are "
                            + picker.startDate.format('MMMM D, YYYY')
                            + " to "
                            + picker.endDate.format('MMMM D, YYYY')
                        );
                    });
                    $('#reportrange').on('cancel.daterangepicker', function (ev, picker) {
                        console.log("cancel event fired");
                    });

                    $('#options1').click(function () {
                        $('#reportrange').data('daterangepicker').setOptions(optionSet1, cb);
                    });

                    $('#options2').click(function () {
                        $('#reportrange').data('daterangepicker').setOptions(optionSet2, cb);
                    });

                    $('#destroy').click(function () {
                        $('#reportrange').data('daterangepicker').remove();
                    });

                });
            </script>

        </div>


        <h4>Plays nicely with Bootstrap dropdowns</h4>

        <div class="well">

            <div class="dropdown" style="display: inline-block;">
                <a data-toggle="dropdown" class="btn btn-primary" href="#">Regular dropdown</a>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                    <li><a href="#">item</a></li>
                </ul>
            </div>

            <div id="reportrange2" class="btn"
                 style="display: inline-block; background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
                <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                <span></span> <b class="caret"></b>
            </div>

            <script type="text/javascript">
                $(document).ready(function () {
                    $('#reportrange2 span').html(moment().subtract('days', 29).format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));
                    $('#reportrange2').daterangepicker();
                });
            </script>

        </div>


    </div>
</div>


</body>
</html>